import addCommas from '@/utils/addCommas';
import './index.less';
import type { MonthOrders } from '../types';
function CenterModel(props: { monthOrders: MonthOrders | null }) {
  const { monthOrders } = props;
  return (
    <div className="center_model">
      <div className="decoration">
        <div className="left_bar">
          <img className="many_img" src="/visual/manyPoygon.svg" alt="" />
          <div className="yellow_img" />
        </div>
        <div className="center_blue_line">
          <img className="blue_line1" src="/visual/blueLine.svg" alt="" />
        </div>
        <div className="right_bar">
          <img className="many_img" src="/visual/manyPoygon.svg" alt="" />
          <div className="yellow_img" />
        </div>
      </div>
      <div className="statistical_data">
        <div className="item">
          <div className="title_box">
            <div className="yellow_box">
              <div className="inner_box" />
            </div>
            <span>本月订单金额总计</span>
          </div>
          <div className="unit">
            {monthOrders?.payable ? addCommas((monthOrders?.payable / 100).toFixed(2)) : '0'}
            <span>元</span>
          </div>
        </div>
        <div className="item">
          <div className="title_box">
            <div className="yellow_box">
              <div className="inner_box" />
            </div>
            <span>本月实付款</span>
          </div>
          <div className="unit">
            {monthOrders?.payment ? addCommas((monthOrders?.payment / 100).toFixed(2)) : '0'}
            <span>元</span>
          </div>
        </div>
        <div className="item">
          <div className="title_box">
            <div className="yellow_box">
              <div className="inner_box" />
            </div>
            <span>订单缴费率</span>
          </div>
          <div className="unit">
            {monthOrders?.payable ? (monthOrders.payment / monthOrders.payable).toFixed(2) : '0'}
            <span>%</span>
          </div>
        </div>
      </div>
    </div>
  );
}

export default CenterModel;
